// ----------------------------- 初始化剪裁框-----------------------------------
let image = $('#image');

let option = {
    aspectRatio: 1,
    preview: '.img-preview'
}

image.cropper(option);


// ----------------------------- 点击 上传 能够触发文件域的单击事件 ------------------
// button:contains("标签的内容")  ---- 查找包含“内容”的标签
$('button:contains("上传")').on('click', function() {
    $('#file').trigger('click');
})

// ----------------------------- 更换剪裁区的图片 -----------------------------------
$('#file').on('change', function() {
    // console.dir(this);
    if (this.files.length > 0) {
        let fileObj = this.files[0];
        let url = URL.createObjectURL(fileObj);
        image.cropper('replace', url);
    }
})


// ----------------------------- 点击 确定，剪裁图片，提交给接口 --------------------------
$('button:contains("确定")').on('click', function() {
    // 1. 剪裁图片 ==> 得到canvas(h5的画布)
    let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
    // 2. 把canvas转换为base64格式 （因为接口需要base64格式）
    let base64 = canvas.toDataURL(); // 原生的方法
    // 3. 按照接口要求提交
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: base64 },
        success: function(res) {
            if (res.status === 0) {
                layer.msg(res.message);
                window.parent.oooo(); // 调用父页面的方法
            }
        }
    });
})